<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Computed 计算属性</h1>
        <button @click="a++">Add to A</button>
        <button @click="b++">Add to B</button>
        <p>A - {{a}}</p>
        <p>B - {{b}}</p>
        <!-- {{方法()}} 不管点击A还是点击B按钮，addToA()和addToB()都会被执行 -->
        <!-- 
        <p>Age + A = {{addToA()}}</p>
        <p>Age + B = {{addToB()}}</p> 
        -->
        <!-- 调用Computed的函数，不能加()扣号，只会触发相关的函数。点击A按钮不会触发addToB -->
        <!-- Computed：只要依赖的属性值变化时才会触发 -->
        <!-- 使用场景：作为过滤器，监听值变化使用 -->
        <p>Age + A = {{addToA}}</p>
        <p>Age + B = {{addToB}}</p>
    </div>
    <script src="js/ch10.js"></script>
</body>
</html>